import { motion } from "motion/react"
import { LoginOtpForm, LoginOtpCodeForm } from "../data"
import { css } from "@emotion/react"
import Svg from "@/components/base/Svg"

export default function ErrorWrapper({ children }: { children: React.ReactNode }) {
    const form = LoginOtpForm.useFormContext()

    return (
        <motion.div
            css={css`
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 8rem;
            `}
        >
            {children}
            {form.formState.errors.number?.message && (
                <motion.caption
                    css={css`
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: 12rem;
                        line-height: 16rem;
                        font-weight: 500;
                        font-family: "Gilroy", monospace;
                        color: #fb2d60;
                        gap: 4rem;
                    `}
                >
                    <Svg
                        css={css`
                            width: 12rem;
                            height: 12rem;
                        `}
                        src="login/error_head.svg"
                    />
                    {form.formState.errors.number?.message}
                </motion.caption>
            )}
        </motion.div>
    )
}

export function ErrorWrapperCode({ children }: { children: React.ReactNode }) {
    const form = LoginOtpCodeForm.useFormContext()

    return (
        <motion.div
            css={css`
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 8rem;
            `}
        >
            {children}
            {form.formState.errors.code?.message && (
                <motion.caption
                    css={css`
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: 12rem;
                        line-height: 16rem;
                        font-weight: 500;
                        font-family: "Gilroy", monospace;
                        color: #fb2d60;
                        gap: 4rem;
                    `}
                >
                    <Svg
                        css={css`
                            width: 12rem;
                            height: 12rem;
                        `}
                        src="login/error_head.svg"
                    />
                    {form.formState.errors.code?.message}
                </motion.caption>
            )}
        </motion.div>
    )
}

function ErrorWrapperAll({ children }: { children: React.ReactNode }) {
    const form = LoginOtpForm.useFormContext()

    return (
        <motion.div
            css={css`
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 8rem;
            `}
        >
            {children}
            {form.formState.errors.number?.message && (
                <motion.caption
                    css={css`
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        font-size: 12rem;
                        line-height: 16rem;
                        font-weight: 500;
                        font-family: "Gilroy", monospace;
                        color: #fb2d60;
                        gap: 4rem;
                    `}
                >
                    <Svg
                        css={css`
                            width: 12rem;
                            height: 12rem;
                        `}
                        src="login/error_head.svg"
                    />
                    {form.formState.errors.number?.message}
                </motion.caption>
            )}
        </motion.div>
    )
}
